<template>
<div class="container" id="index">
  <div class="row">
    <b-btn  @click="show"  >add</b-btn>
    <!-- the modal -->
    <b-modal  ref="myModalRef" hide-footer id="myModal">

      <form role="form">
        <p class="form-group">
          <label for="username">用户名:</label>
          <input type="text" id="username" class="form-control" placeholder="输入用户名" v-model="username" />
        </p>
        <p class="form-group">
          <label for="age">年龄:</label>
          <input type="text" id="age" class="form-control" placeholder="输入年龄" v-model="age" />
        </p>
        <p class="form-group">
          <input type="button" value="添加" class="btn btn-primary" @click="add" />
          <input type="reset" value="重置" class="btn btn-danger" />
        </p>
      </form>
    </b-modal>

<b-modal ref="myModalDel" hide-footer id="myModalD">
  <form role="del">
          <h4 class="modal-title">{{deletePrompt}}</h4>
          <p class="form-group">
          <button data-dismiss="modal" class="btn btn-primary btn-sm" modal-cancel>取消</button>
          <button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteMsg()">确认</button>
        </p>
  </form>

</b-modal>
  </div>

  <div class="row">
    <table class="table table-bordered table-hover">
      <tr class="text-danger">
        <th class="text-center">序号</th>
        <th class="text-center">名字</th>
        <th class="text-center">年龄</th>
        <th class="text-center">操作</th>
      </tr>
      <tr class="text-center" v-for="(item, index) in items" :key="index">
        <td>{{index + 1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>
           <b-btn v-b-modal.myModalD   @click="deleteFun(1,index)" >del</b-btn>
        </td>
      </tr>
      <tr v-show="items.length!=0">
        <td colspan="4" class="text-right">
          <button class="btn btn-danger btn-sm" v-on:click="deleteFun(2,-1)">删除全部</button>
        </td>
      </tr>
      <tr v-show="items.length==0">
        <td colspan="4" class="text-center text-muted">
          <p>暂无数据....</p>
        </td>
      </tr>
    </table>
  </div>

  <div class="row">

  </div>
</div>
</template>

<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

export default {
  name: 'index',
  data: function () {
    return {
      msg: '用户信息表',
      username: '',
      age: '',
      items: [{ name: 1, age: 2 }],
      nowIndex: 0,
      deletePrompt: ''
    }
  },
  methods: {
    show: function () {
      this.$refs.myModalRef.show()
    },
    add: function () {
      console.log(this)

      this.items.push({
        name: this.username,
        age: this.age
      })
      this.username = ''
      this.age = ''
      this.$refs.myModalRef.hide()
    },
    deleteMsg: function () {
      if (this.nowIndex === -1) {
        this.items = []
      } else {
        this.items.splice(this.nowIndex, 1)
      }
      this.$refs.mymodalDel.hide()
    },
    deleteFun: function (data, index) {
      if (data === 1) {
        this.nowIndex = index
        this.deletePrompt = '确认删除么?'
      } else {
        this.nowIndex = index
        this.deletePrompt = '确认删除全部么?'
      }
      console.log(this.$refs.mymodalDel.show())
    }
  }
}
</script>

<!-- Add? 'scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
